<template>
    <div>
        <el-container>
            <div style="height: 60px">
            <el-header style="position: fixed;top:0;width: 100%;background-color: white;z-index: 999">
                <!--                图标logo-->
                <div style="height: 60px; line-height: 60px; background-color: while; margin-bottom: 2px;float: left">
                    <img src="../assets/logo.jpg" alt="" style="width: 50px; position: relative; top: 10px; left: 20px;">
                    <span style="margin-left: 25px; font-size: 24px; ">大连日月昇渔家菜</span>
                </div>
                <!--                菜单导航栏-->
                <div style="float: left;margin-left: 190px;">
                    <el-menu :default-active="$route.path" router class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="/userhome">首页</el-menu-item>
                        <el-menu-item index="/diancan">点餐</el-menu-item>
                        <el-menu-item index="/yuyue">预约</el-menu-item>
<!--                        <el-menu-item index="/1">购买超级会员卡</el-menu-item>-->
                    </el-menu>
                </div>
                <div style="float: right;margin-right: 90px;height: 60px">
                    <el-menu v-if="!($store.state.islogin)" :default-active="$route.path" router class="el-menu-demo"
                             mode="horizontal">
                        <el-menu-item index="/userlogin">登录</el-menu-item>
                        <el-menu-item index="/userregister">注册</el-menu-item>
                    </el-menu>
                    <el-dropdown v-else style="width: 150px; cursor: pointer; text-align: right">
                        <div style="display: inline-block">
                            <el-avatar class="el-dropdown-link" style="margin-top: 10px;position: relative;"
                                       size="large"
                                       :src="$store.state.circleUrl"></el-avatar>
                        </div>

                        <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <span style="text-decoration: none" @click="toChangePassword">修改密码</span>
                            </el-dropdown-item>
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <span style="text-decoration: none" @click="toUserInfo">个人信息</span>
                            </el-dropdown-item>
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <span style="text-decoration: none" @click="toHistoryOrder">历史订单</span>
                            </el-dropdown-item>
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <span style="text-decoration: none" @click="toYuyue">我的预约</span>
                            </el-dropdown-item>
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <span style="text-decoration: none" @click="logout">退出</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </el-header>
            </div>
            <el-main style="overflow: hidden">
                <router-view/>
            </el-main>
<!--            <el-footer height="330px">-->
<!--                <hr>-->
<!--                <div id="foot1">-->
<!--                    <div style="float: left"><img src="../assets/logo-footer.png" alt=""></div>-->
<!--                    <div style="float: right;margin-top: 20px;margin-left: 10px"><span-->
<!--                            style="font-size: 36px;">健康洗衣</span><br>-->
<!--                        <span style="font-size: 26px;margin-left: 80px">干洗</span></div>-->
<!--                    <div style="clear: both"></div>-->
<!--                    <i style="font-size: 30px;margin-top: 20px" class="el-icon-location-outline"></i><span>大连市甘井子区-七贤路316号</span>-->
<!--                    <br>-->
<!--                    <i style="font-size: 30px;margin-top: 20px"-->
<!--                       class="el-icon-phone-outline"></i><span>15140372107</span>-->
<!--                    <br>-->
<!--                    <i style="font-size: 30px;margin-top: 20px"-->
<!--                       class="el-icon-message"></i><span>2865697079@qq.com</span>-->
<!--                </div>-->
<!--                <div id="foot2">-->
<!--                    <h1 style="text-align: center;font-size: 35px">联系我们</h1>-->
<!--                    <img style="width: 180px;margin-top: 20px" src="../assets/weixin.png" alt="">-->
<!--                </div>-->
<!--                <div id="foot3">-->
<!--                    <h1 style="text-align: center;font-size: 35px">营业时间</h1>-->
<!--                    <p style="font-size: 25px;margin-top: 30px">周一到周五：8am-7pm</p>-->
<!--                    <p style="font-size: 25px">周六周天：9am-5pm</p>-->
<!--                </div>-->
<!--                <div id="foot4">-->
<!--                    <h1 style="font-size: 35px">服务</h1>-->
<!--                    <ul style="font-size: 25px;list-style: inside">-->
<!--                        <li>干洗</li>-->
<!--                        <li>地毯清洗</li>-->
<!--                        <li>西装清洗</li>-->
<!--                        <li>鞋子清洗</li>-->
<!--                        <li>绒面清洗</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div style="clear: both"></div>-->
<!--                <hr>-->
<!--                <div style="text-align: center">-->
<!--                    Copyright©2022 sunways All Rights Reserved-->
<!--                </div>-->
<!--            </el-footer>-->
        </el-container>

    </div>
</template>

<script>
    export default {
        name: "UserLayout",
        data() {
            return {
                islogin: false,
                circleUrl: '',
            }
        },
        methods: {
            toChangePassword(){
                this.$router.push("/userchangepassword")
            },
            toUserInfo(){
                this.$router.push("/userinfo")
            },
            toYuyue(){
                this.$router.push("/historyYuyue")
            },
            toHistoryOrder(){
                this.$router.push("/historyorder")
            },
            toVipCenter(){
                this.$router.push("/vipcenter")
            },
            logout() {
                this.$message.success("退出成功")
                this.$store.commit("setUserInfo",null)
                window.localStorage.removeItem("user")
                this.$store.state.islogin = false
                this.$router.push("/user")
            },

        },
        mounted() {
            this.$store.dispatch("getuserinfo")
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .el-header {
        color: #333;
    }

    .el-footer {
        background-color: #409EFF;
        font-family: kaiti;
        color: white;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    #foot1 {
        float: left;
        margin-left: 50px;
        margin-top: 20px;
    }

    #foot2 {
        float: left;
        margin-top: 50px;
        margin-left: 10vw;
    }

    #foot3 {
        float: left;
        margin-top: 50px;
        margin-left: 10vw;
    }

    #foot4 {
        float: left;
        margin-top: 50px;
        margin-left: 10vw;
    }
</style>